import m from"./Wrapper.js";import{_ as c}from"./index.vue_vue_type_style_index_0_lang2.js";import{d as k,e as p,r as u,P as s,Q as r,$ as o,X as y,R as e,a5 as i,ab as g,K as f,a2 as N,S as v}from"./elementPlusModules.js";const _={class:"merak-container-has-aside"},h={class:"merak-aside"},L={class:"merak-overflow-y"},J={style:{padding:"4px 10px"}},b={class:"merak-card merak-table-wrapper"},x=k({__name:"Container",setup(P){const t=p(`
<template>
  <Wrapper>
    <div class="merak-container-has-aside">
      <div class="merak-aside"></div>
      <div class="merak-card merak-table-wrapper">
        <MerakXTable
          :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
          :columns="state.columns"
          :data="state.data"
          :show-header="false"
          :pagination="false"
        />
      </div>
    </div>
  </Wrapper>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import Wrapper from "./Wrapper.vue";

import MerakXTable, { MerakXTableColumn } from "../../../../../../components/MerakXTable";

const state = reactive<{
  columns: MerakXTableColumn[];
  data: Array<{ [k: string]: any }>;
}>({
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ],
  data: [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ]
});
<\/script>
`),a=u({columns:[{field:"name",title:"Name"},{field:"age",title:"Age"},{field:"address",title:"Address"}],data:[{id:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{id:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{id:"3",name:"Not Expandable",age:29,address:"Jiangsu No. 1 Lake Park",description:"This not expandable"},{id:"4",name:"Joe Black",age:32,address:"Sydney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."}]});return(d,w)=>(s(),r(i,null,[o(m,null,{default:y(()=>[e("div",_,[e("div",h,[e("div",L,[(s(!0),r(i,null,g(Array.from({length:50}).map((n,l)=>l+1),n=>(s(),r("div",J,v(n),1))),256))])]),e("div",b,[o(f(c),{"columns-by-store":JSON.parse(JSON.stringify(a.columns)),columns:a.columns,data:a.data,"show-header":!1,pagination:!1},null,8,["columns-by-store","columns","data"])])])]),_:1}),N(d.$slots,"default",{html:t.value})],64))}});export{x as _};
